<html>

<head>
  <title>Express</title>
  <link rel="stylesheet" href="/stylesheets/style.css">
  <style>
    table {
      border-collapse: collapse;
    }

    th,
    td {
      border: 1px solid yellowgreen;
    }

    tr:nth-of-type(even) {
      background-color: aqua;
    }

    img {
      width: 50px;
      height: 50px;
    }
  </style>
</head>

<body>
  <div>
    <h1>新闻类型</h1>
    <form action="">
      <div>
        标题：<input type="text" name="title">
      </div>
      <div>
        标题内容：<input type="text" name="content">
      </div>
      <div>
        <button type="submit">新增</button>
      </div>
    </form>
  </div>
  <div>
    <h1>新闻内容</h1>
    <form action="">
      <div>
        标题：<input type="text" name="title">
      </div>
      <div>
        图片：<input type="file" name="myfile">
      </div>
      <div>
        <select name="sel" id=""></select>
      </div>
      <div>
        新闻内容：<input type="text" name="desc">
      </div>
      <div>
        <button type="submit">新增</button>
      </div>
    </form>
  </div>

  <table>
    <thead>
      <th>图片</th>
      <th>id</th>
      <th>标题</th>

      <th>新闻内容</th>
      <th>标题分类</th>
      <th>标题分类内容</th>
      <!-- <th>操作</th> -->
    </thead>
    <tbody>

    </tbody>
  </table>
  <script>
    const form1 = document.forms[0];
    const form2 = document.forms[1];
    const sel = document.forms[1].sel;
    const tbody = document.querySelector('tbody');

    getNewsClass()



    console.log(sel);
    form1.onsubmit = function (e) {
      e.preventDefault();
      const xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function () {
        if (this.readyState == 4) {
          if (this.status == 200) {
            if (this.response.flag) {
              alert('新增数据成功')
              form1.reset()
              getNewsClass()
            } else {
              alert('出错了')
            }
          }
        }
      }
      xhr.open('post', '/api/newsclass', true);
      xhr.setRequestHeader('Content-Type', 'application/json');
      xhr.responseType = "json";
      xhr.send(JSON.stringify({
        title: form1.title.value,
        content: form1.content.value
      }))
    }

    //新增新闻内容
    form2.onsubmit = function (e) {
      e.preventDefault();
      const xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function () {
        if (this.readyState == 4) {
          if (this.status == 200) {
            if (this.response.flag) {
              alert('新增数据成功')
              form2.reset()
              getNews()
            } else {
              alert('出错了')
            }
          }
        }
      }
      xhr.open('post', '/api/news', true);
      xhr.responseType = "json";
      xhr.send(new FormData(form2))
    }

    //获取新闻标题
    function getNewsClass() {
      const xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function () {
        if (this.readyState == 4) {
          if (this.status == 200) {
            if (this.response.flag) {
              this.response.data.forEach(item => {
                sel.add(new Option(item.title, item._id))
              });
            } else {
              alert('出错了')
            }
          }
        }
      }
      xhr.open('get', '/api/getTitle', true);
      xhr.responseType = "json";
      xhr.send()
    }


    function getNews() {
      const xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function () {
        if (this.readyState == 4) {
          if (this.status == 200) {
            if (this.response.flag) {
              this.response.data.forEach(item => {
                const tr = document.createElement('tr');
                let td = document.createElement('td');
                td.innerHTML = `<img src="${item.fileId}" alt="">`;
                tr.appendChild(td);
                td = document.createElement('td');
                td.innerHTML = item._id;
                tr.appendChild(td);
                td = document.createElement('td');
                td.innerHTML = item.title;
                tr.appendChild(td);

                td = document.createElement('td');
                td.innerHTML = item.desc;
                tr.appendChild(td);

                td = document.createElement('td');
                td.innerHTML = item.classid.title;
                tr.appendChild(td);

                td = document.createElement('td');
                td.innerHTML = item.classid.content;
                tr.appendChild(td);

                tbody.appendChild(tr)
              });
            } else {
              alert('出错了')
            }
          }
        }
      }
      xhr.open('get', '/api/getnews', true);
      xhr.responseType = "json";
      xhr.send()
    }
  </script>
</body>


</html>